/**
 这个组件是登录的输入框模块
 用这种方法调用，接受3个参数，
 username：String,       ===》上面一行显示的东西
 password:String         ===》下面一行显示的东西
 onLogin = { 函数名 }        ===》默认登录按钮的状态下,点击的回调
 中间预留了重构登录按钮的插槽（自定义按钮没有点击登录的回调）
<LoginBox
username = "请输入用户名"   
password = "请输入密码"     
onLogin = { fn }            
 />
</LoginBox>; 
----矫建武---
**/
import { useState } from 'react';
import { message, Modal, Form, Input } from 'antd';
import styles from './loginBox.module.less';
import { history } from 'umi';
const {
  jjw_form,
  jjw_form_item,
  jjw_ipt,
  jjw_btn,
  jjw_label,
  jjw_span,
  jjw_label1,
  jjw_span1,
  option,
  red,
  underline,
  qrCode,
  back,
} = styles;
import API from '@/api/index';
const App = () => {
  const [forms] = Form.useForm();
  const arr1 = 'username'.split('');
  const arr2 = 'password'.split('');

  //
  // 生成二维码
  const [imgUrl, setImgUrl] = useState('');
  //
  //账户名input的value
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');
  //
  //h2选项卡的判断数据
  const [tabOption, setTabOption] = useState(1);
  const [open, setOpen] = useState(false);
  const goRegister = () => {
    setOpen(true);
    forms.resetFields();
  };
  const goLogin = () => {
    if (!value1 || !value2) return message.error('请输入账号密码!');
    API.registerLogin({ account: value1, password: value2 }).then((res) => {
      if (res.code === 200) {
        localStorage.setItem('token', JSON.stringify(res.data.token));
        message.success('登陆成功!');
        history.push({
          pathname: '/',
        });
      }
    });
  };
  const probation = () => {
    console.log('试用');
  };

  const onFinish = (v) => {
    API.register(v).then(({ code }) => {
      if (code === 200) {
        message.success('创建成功!');
        setOpen(false);
      }
    });
  };
  return (
    <div className={styles.login}>
      <div className={jjw_form}>
        {/* 账号登录和密码登录的选项卡 */}
        <div className={option}>
          <h2
            className={tabOption ? red : ''}
            onClick={() => setTabOption(1)}
            style={{
              position: 'absolute',
              cursor: 'pointer',
              top: '3px',
              padding: '1px 40px',
              transition: '.5s',
              zIndex: 2,
            }}
          >
            账号密码
          </h2>
          <h2
            className={tabOption ? '' : red}
            style={{
              position: 'absolute',
              cursor: 'pointer',
              top: '3px',
              padding: '1px 40px',
              transition: '.5s',
              zIndex: 2,
            }}
            onClick={() => {
              setTabOption(0);
            }}
          >
            微信登录
          </h2>
          <section
            className={!tabOption ? underline : back}
            // style={{ transform: `translateX(${tabOption ? 0 : 167}px)` }}
          ></section>
        </div>
        <div
          className={jjw_form_item}
          style={{ transform: `translateX(${tabOption ? 0 : -400}px)` }}
        >
          <input
            className={jjw_ipt}
            type="text"
            value={value1}
            onChange={(e) => {
              setValue1(e.target.value);
            }}
          />
          <label className={value1 ? jjw_label1 : jjw_label}>
            {arr1.map((ele, i) => {
              return (
                <span
                  style={{ transitionDelay: `${i * 50}ms` }}
                  key={i}
                  className={value1 ? jjw_span1 : jjw_span}
                >
                  {ele}
                </span>
              );
            })}
          </label>
        </div>
        <div
          className={jjw_form_item}
          style={{ transform: `translateX(${tabOption ? 0 : -400}px)` }}
        >
          <input
            type="password"
            className={jjw_ipt}
            value={value2}
            onChange={(e) => {
              setValue2(e.target.value);
            }}
          />
          <label className={value2 ? jjw_label1 : jjw_label}>
            {arr2.map((ele, i) => {
              return (
                <span
                  style={{ transitionDelay: `${i * 50}ms` }}
                  key={i}
                  className={value2 ? jjw_span1 : jjw_span}
                >
                  {ele}
                </span>
              );
            })}
          </label>
        </div>
        {/*  */}
        {/* 登录部分的功能以及回调 */}
        <div
          style={{
            marginTop: '60px',
            transform: `translateX(${tabOption ? 0 : -400}px)`,
            transition: '.5s',
          }}
        >
          <button className={jjw_btn} onClick={goLogin}>
            登录
          </button>
          <footer className={styles.footer}>
            <div onClick={goRegister}>没有账号?免费注册</div>
            <div onClick={probation}>免费试用</div>
          </footer>
        </div>
        {/* 显示二维码的地方 */}
        <div
          className={qrCode}
          style={{ transform: `translate(${tabOption ? 400 : 0}px)` }}
        >
          <img src={imgUrl} alt="" />
          <p>请使用微信扫码登录</p>
        </div>
      </div>
      <Modal
        title="注册"
        open={open}
        onOk={() => forms.submit()}
        onCancel={() => setOpen(false)}
        onText="注册"
        maskClosable={false}
        keyboard={false}
      >
        <Form name="basic" onFinish={onFinish} form={forms}>
          <Form.Item
            label="账号"
            name="account"
            rules={[
              {
                required: true,
                message: '请输入账号',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="用户名"
            name="userName"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="电话"
            name="phone"
            rules={[
              {
                required: true,
                message: '请输入电话号',
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default App;
